feat: add scrollbar to Table of Contents for long articles#288
feat: add scrollbar to Table of Contents for long articles#288vaani1127 wants to merge 4 commits intokeploy:mainfrom
Conversation
|
Hey @vaani1127 👋 — thanks so much for contributing to the project, really appreciate it! Your PR looks great and has been marked for merging. Here's a quick note from the reviewer:
We'll get this merged in soon. Keep the great work coming! 🚀 |
There was a problem hiding this comment.
Pull request overview
Adds vertical scrolling to the desktop Table of Contents so very long heading lists don’t expand indefinitely, improving navigation for long articles.
Changes:
- Makes the desktop TOC
<nav>scrollable via a max-height andoverflow-y-auto. - Minor formatting/indentation cleanup in
handleItemClick.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <nav ref={tocRef} className="max-h-[80vh] overflow-y-auto pr-2"> | ||
| <ul className="pl-0 leading-5"> |
There was a problem hiding this comment.
Adding max-h-[80vh] overflow-y-auto to the TOC container changes tocRef.current.clientHeight to be capped at ~80vh, so the resizeHandler effect (which sets isList when clientHeight > window.innerHeight * 0.8) will never flip isList to true for long TOCs. This effectively makes the large-screen <select> fallback and the isList-based layout tweaks in components/post-body.tsx unreachable/always-false. If you still want isList to represent “content overflows”, compare scrollHeight vs clientHeight (or scrollHeight > clientHeight) instead; otherwise, consider removing the isList sizing effect/prop to avoid misleading state.
| <nav ref={tocRef} className="max-h-[80vh] overflow-y-auto pr-2"> | |
| <ul className="pl-0 leading-5"> | |
| <nav className="max-h-[80vh] overflow-y-auto pr-2"> | |
| <ul ref={tocRef} className="pl-0 leading-5"> |
Signed-off-by: vaani1127 <vprashar_be23@thapar.edu>
Signed-off-by: vaani1127 <vprashar_be23@thapar.edu>
vaani1127
force-pushed
the
feat/toc-scrollbar
branch
from
9da8fba to
7737ef1
Compare
Signed-off-by: Vaani Prashar <147430351+vaani1127@users.noreply.github.com>
This PR adds a scrollbar to the Table of Contents component to improve usability for long articles.
Changes
components/TableContents.tsxto add scrollbar functionalityWhy